Tabs

A jQuery plugin for simple tabs.

Demo

Basic

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Mobile Max Width

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Use

Main

tabs.js
tabs.css

Dependencies

core.js
mediaquery.js
swap.js
touch.js

Basic

Tabs will automatically turn a set of links into a tabbed interface. The link's href attribute should point to the desired content's fragment identifier, white the data-tabs-group attribute should remain consistent between linked tabs:

$(".tab").tabs();
<nav>
    <a href="#tab-one" class="tab" data-tabs-group="tab-group">One</a>
    <a href="#tab-two" class="tab" data-tabs-group="tab-group">Two</a>
    <a href="#tab-three" class="tab" data-tabs-group="tab-group">Three</a>
</nav>
<div id="tab-one">
    ...
</div>
<div id="tab-two">
    ...
</div>
<div id="tab-three">
    ...
</div>

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-tabs-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
customClass string '' Class applied to instance
maxWidth string Infinity Width at which to auto-disable plugin
mobileMaxWidth string '740px' Width at which to auto-disable mobile styles
vertical boolean false Flag to draw vertical tab set

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
update.tabs Tab activated

Methods

Methods are publicly available to all active instances, unless otherwise stated.

activate

Activates instance.

$(".target").tabs("open");

defaults

Extends plugin default settings; effects instances created hereafter.

$.tabs("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").tabs("destroy");

disable

Disables instance.

$(".target").tabs("disable");

enable

Enables instance.

$(".target").tabs("enable");

CSS

Class Type Description
.fs-tabs-element element Target elmement
.fs-tabs element Base widget class
.fs-tabs.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-tab element Tab handle element
.fs-tabs-tab.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-tab.fs-tabs-active modifier Indicates active state
.fs-tabs-tab.fs-tabs-mobile modifier Indicates mobile interface
.fs-tabs-content element Tab content element
.fs-tabs-content.fs-tabs-enabled modifier Indicates enabled state
.fs-tabs-content.fs-tabs-active modifier Indicates active state
.fs-tabs-tab_mobile element Mobile tab handle element
.fs-tabs-tab_mobile.fs-tabs-active modifier Indicates active state